<template>
  <div>
    <!-- <el-input v-model="url" type="text" style="width: 20%" /> &nbsp; &nbsp;
    <el-button @click="join" type="primary">连接</el-button>
    <el-button @click="exit" type="danger">断开</el-button>

    <br />
    <el-input type="textarea" v-model="message" :rows="9" />
    <el-button type="info" @click="send">发送消息</el-button>
    <br />
    <br />
    <el-input type="textarea" v-model="text_content" :rows="9" /> 返回内容
    <br />
    <br /> -->

      <heating :xAxisData="xAxisData" :seriesData="seriesData"></heating>

  </div>
</template>

<script>

import Crate from "@/components/TZ/Crate"
import heating from '@/components/TZ/Heating'


export default {
  components: { Crate,heating },
  data() {
    return {
      url: "ws://localhost:9208/websocket",
      message: "",
      text_content: "",
      ws: null,
      xAxisData:[
            '5000','5100','5200', '5300', '5400', '5500', '5600', '5700', '5800','5900',
            '6000','6100','6200', '6300', '6400', '6500', '6600', '6700', '6800','6900',
      ],
      seriesData:[
              120, 145, 120, 125, 60, 62, 70,180,160,150,
              170, 145, 130, 145, 145, 132, 120,110,90,180
      ],
    };
  },
  mounted() {
      this.join()
    },
  methods: {
    join() {
      const wsuri = this.url;
      this.ws = new WebSocket(wsuri);
      const self = this;
      this.ws.onopen = function (event) {
        self.text_content = self.text_content + "已经打开连接!" + "\n";
        console.log(event);
        console.log("已经打开连接");
      };
      this.ws.onmessage = function (event) {
        self.text_content = event.data + "\n";
        console.log(event);
      };
      this.ws.onclose = function (event) {
        self.text_content = self.text_content + " !" + "\n";
      };

      // this.ws.addEventListener('open', () => {
      //   console.log('WebSocket建立连接');
      //   this.heartbeatInterval = setInterval(() => {
      //     this.sendHeartbeat();
      //     console.log();
      //   }, 5000); // 5秒发送一次心跳
      // });
      this.ws.addEventListener('message', (event) => {
        // 在这里处理接收到的消息
        console.log('接收消息:', event.data);
      });
    },
    sendHeartbeat() {
      const heartbeatMessage = {  
        data: null,
        type: "HEART"
      };
      this.socket.send(JSON.stringify(heartbeatMessage));
    },
    sendMessage() {
      // 发送消息到WebSocket服务器
      if (this.socket.readyState === WebSocket.OPEN) {
        this.socket.send('hi');
      } else {

      }
    },
    exit() {
      if (this.ws) {
        this.ws.close();
        this.ws = null;
      }
    },
    send() {
      if (this.ws) {
        this.ws.send(this.message);
      } else {
        alert("未连接到服务器");
      }
    },
  },
};
</script>
